<template>
	<view>
		<view class="page-foot">
			<view class="flex-box ptb20 plr30 m-hairline--top">
				<view class="fs34 flex-grow-1">
					<text class="red" v-if="detail.checkinfo==2">·待签约</text>
					<text class="blue" v-if="detail.checkinfo==0 || detail.checkinfo==1">·签约中</text>
					<text class="red" v-if="detail.checkinfo==3">·待支付</text>
					<text class="black" v-if="detail.checkinfo==4">·已成交</text>
					<text class="col89" v-if="detail.checkinfo<0">·已取消</text>
				</view>
				<view class="g-btn4 ml20" v-if="detail.checkinfo == 0 || detail.checkinfo == 1 || detail.checkinfo == 2 || detail.checkinfo == 3" @click="cancel()">取消签约</view>
				<view class="g-btn5 ml20" v-if="detail.checkinfo==0 || detail.checkinfo==2" @click="signContract()">立即签约</view>
				<view class="g-btn6 ml20" v-if="detail.checkinfo == 0 || detail.checkinfo == 1 || detail.checkinfo == 3 || detail.checkinfo == 4" @click="lookImage()">查看合同</view>
				<button class="g-btn6 ml20" open-type="share" v-if="detail.checkinfo == 1 || detail.checkinfo == 2">邀请签约</button>
			</view>
		</view>
		<view class="container plr30">
			<view class="source_item flex-box pt30">
				<image :src="detail.rental.image" mode="aspectFill"></image>
				<view class="flex-grow-1">
					<view class="m-ellipsis fs34 col10 mb15">{{detail.rental.name}}</view>
					<view class="area-size col89 fs24 pb15">
						<text>{{detail.rental.prov}} | {{detail.rental.region}}</text>
						<text>{{detail.rental.space}}㎡</text>
					</view>
					<view class="flex-box">
						<view class="targets" v-for="item in detail.rental.house_tag_text_arr">{{item}}</view>
						
					</view>
					<view class="price">¥<text>{{detail.rental.price}}</text>/月</view>
				</view>
			</view>
			<template v-if="detail.lessor_state == 1">
				<view class="title">房东信息</view>
				<view class="flex-box fs34 pb50">
					<view class="col89 flex-grow-1">姓名</view>
					<view class=" col10">{{detail.lessor_name}}</view>
				</view>
				<view class="flex-box fs34 pb50">
					<view class="col89 flex-grow-1">身份证号</view>
					<view class=" col10">{{detail.lessor_identify}}</view>
				</view>
				<view class="flex-box fs34 pb50 m-hairline--bottom">
					<view class="col89 flex-grow-1">电话</view>
					<view class="col10">{{detail.lessor_mobile}}</view>
					<button class="tel" @click="callPhone(detail.lessor_mobile)">
						<image src="/static/icon/tel.png" mode="aspectFill"></image>
					</button>
				</view>
			</template>
			<template v-if="detail.state == 2">
				<view class="title">租客信息</view>
				<view class="flex-box fs34 pb50">
					<view class="col89 flex-grow-1">姓名</view>
					<view class=" col10">{{detail.renter_name}}</view>
				</view>
				<view class="flex-box fs34 pb50">
					<view class="col89 flex-grow-1">身份证号</view>
					<view class=" col10">{{detail.renter_identify}}</view>
				</view>
				<view class="flex-box fs34 pb50 m-hairline--bottom">
					<view class="col89 flex-grow-1">电话</view>
					<view class="col10">{{detail.renter_mobile}}</view>
					<button class="tel" @click="callPhone(detail.renter_mobile)">
						<image src="/static/icon/tel.png" mode="aspectFill"></image>
					</button>
				</view>
			</template>
			<view class="title">订单信息</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">订单号</view>
				<view class=" col10">{{detail.order_no}}</view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">支付类型</view>
				<view class=" col10">{{detail.type}}</view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">租期</view>
				<view class="col10">{{detail.rent_start_date}}起至{{detail.rent_end_date}}止</view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">押金</view>
				<view class="red fs24">¥<text class="fs34">{{detail.deposit}}</text></view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">月租金</view>
				<view class="red fs24">¥<text class="fs34">{{detail.unit_price}}</text>/月</view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">租金</view>
				<view class="red fs24">¥<text class="fs34">{{detail.renter_money}}</text></view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">租客中介费</view>
				<view class="red fs24">¥<text class="fs34">{{detail.renter_medium_money}}</text></view>
			</view>
			<view class="flex-box fs34 pb50">
				<view class="col89 flex-grow-1">房东中介费</view>
				<view class="red fs24">¥<text class="fs34">{{detail.lessor_medium_money}}</text></view>
			</view>
			<view class="flex-box fs34 pb50" v-if="detail.pay_status == 1">
				<view class="col89 flex-grow-1">支付方式</view>
				<view class="black">微信支付</view>
			</view>
			<view class="flex-box flex-end flex-align-baseline pb50">
				<view class="fs28 col89">合计：</view>
				<view class="fs24 red">¥</view>
				<view class="fs44 red">{{detail.renter_pay_money}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const core = require('@/xilu/core.js');
	export default {
		data() {
			return {
				rental_order_id:0,
				detail:{}
			};
		},
		onLoad(options) {
			this.rental_order_id = options.rental_order_id || 0;
			this.fetchDetail();
		},
		onShareAppMessage: function(e) {
			if(e.from == 'button'){
				let id = this.rental_order_id;
				return {
					title: '租房合同签约',
					path: '/pages/rental/sign_now/sign_now?rental_order_id='+id
				};
			}
		},
		methods:{
			fetchDetail(){
				core.get({url:"api/xiluhouse.rental_order/detail",data:{rental_order_id: this.rental_order_id},success:(ret)=>{
					this.detail = ret.data;
				},loading:false});
			},
			//拨打电话
			callPhone(phoneNum) {
			    uni.makePhoneCall({
			      phoneNumber: phoneNum,
			      success: function() {
				  },
				  fail() {
						
				  }
				})
			},
			//取消
			cancel(){
				let that = this;
				let order_id = that.rental_order_id;
				//联网加载数据
				uni.showModal({
					title: "提示",
					content: "确认取消？",
					success(res) {
						if(res.confirm){
							core.post({url:'/api/xiluhouse.broker/cancel_sign',data:{rental_order_id:order_id},success:(ret)=>{
								that.fetchDetail();
							},loading:true});
						}
					}
				})
			},
			//发起签约
			signContract(){
				uni.navigateTo({
					url: '/pages/rental/sign_now/sign_now?rental_order_id='+ this.rental_order_id
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.source_item {
		line-height: 1.3;

		image {
			display: block;
			width: 240rpx;
			height: 190rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.area-size {
			text+text {
				margin-left: 40rpx;
			}
		}

		.targets {
			padding: 2rpx 4rpx;
			background: #cce9ff;
			font-size: var(--fs18);
			color: var(--normal);
			border-radius: 2rpx;
			margin-right: 10rpx;
			margin-bottom: 12rpx;
		}

		.price {
			color: var(--red);
			font-size: 24rpx;

			text {
				font-size: 34rpx;
			}
		}
	}

	.title {
		font-size: 34rpx;
		color: #101010;
		padding: 40rpx 0 30rpx;
	}

	.tel {
		padding: 0;
		margin: 0;
		line-height: 1;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-left: 15rpx;
		}
	}

	.g-btn4,
	.g-btn5,
	.g-btn6 {
		font-size: 28rpx;
	}
</style>
